<template>
  <div>
    <el-table ref="table" v-bind="$props" v-on="$listeners">
      <el-table-column v-if="selection" type="selection" width="55" />
      <el-table-column v-if="serialNumber" type="index" width="70" />
      <el-table-column
        v-for="(item, idx) in columnConfig"
        :key="idx"
        v-bind="item.attr"
      >
        <template v-if="useCusdomHeader" slot="header">
          <TextTooltipTableHeader :content="item.attr.label" />
        </template>
        <template v-if="item.scopedSlot" v-slot:default="{ row, $index }">
          <slot :name="item.scopedSlot" :row="row" :index="$index"></slot>
        </template>
        <template v-else v-slot:default="{ row }">
          {{
            row[item.attr.prop] || row[item.attr.prop] == 0
              ? row[item.attr.prop]
              : '--'
          }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Table } from 'element-ui'
import TextTooltipTableHeader from './TextTooltip'
export default {
  name: 'Table',
  components: {
    TextTooltipTableHeader
  },
  props: {
    ...Table.props,
    /**
     * @description: 是否开启自定义表头，如果列数过多导致分配宽度过小可以设置column属性 min-width="120"
     * @param {Boolean}
     * @return {Boolean}
     */
    useCusdomHeader: {
      type: Boolean,
      default: false
    },
    // 复选框
    selection: {
      type: Boolean,
      default: false
    },
    //排序
    serialNumber: {
      type: Boolean,
      default: false
    },
    /**
     * @description: 配置表格列的属性，ex:
     * {
     * attr: {
              prop: 'name',
              label: '测试',
              showOverflowTooltip: true
            }, // column的默认配置，要跟element的column attributes一致
        scopedSlot: 'name' // scope slot名称
     * }
     * @param {Array} 
     * @return {Array} 
     */
    columnConfig: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      disabled: true
    }
  },
  methods: {}
}
</script>

<style lang="less"></style>
